<template>
  <el-container class="admin-layout" :class="{'sidebar--show': !isCollapse, 'sidebar--hide': isCollapse}">
    <el-header>
      <div class="flex-row">
        <div class="flex-item-fixed" style="position: relative">

          <div class="tools" @click.prevent="collapse" v-if="adminInfo.userRole!=='COM'">{{$appConf.appTitle}}</div>
          <div class="tools" @click.prevent="collapse" v-else>{{$appConf.appTitleCom}}</div>
        </div>
        <div class="flex-item"></div>
        <div class="flex-item-fixed">
          <el-dropdown trigger="hover" style="height:50px;" :show-timeout="10">
            <span class="el-dropdown-link userinfo-inner" style="color: white">
            {{adminDisplayName}}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="goChangePassword">
                <i class="fa fa-unlock-alt mr10" aria-hidden="true"></i>
                <span>修改密码</span>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">
                <i class="fa fa-sign-out mr10" aria-hidden="true"></i>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-main style="padding: 0px;">
    <el-container>
    <el-aside width="200px" class="sidebar">
      <div class="flex-row flex-center" style="margin: 20px;">
        <img class="nav-logo" src="/image/logo.png" alt="">
      </div>
      <nav-menu :menus="currentMenus"></nav-menu>
    </el-aside>

    <el-container class="page-main">

      <el-main style="padding:0;position: relative">
        <router-view></router-view>
      </el-main>
      <div class="collapse-button" @click="collapse"></div>
    </el-container>

    </el-container>
    </el-main>
    <el-footer class="footer">
      <span style="text-align: center;color: white;">Copyright © 2018-2019 .  All Rights Reserved 洛阳升韵网络科技有限公司</span>
    </el-footer>
  </el-container>
</template>
<script>
import { mapGetters } from "vuex";
import NavMenu from "@/components/nav-menu";
import ImageCover from "@/components/image-cover";

export default {
  beforeRouteEnter(to, from, next) {
    window.store.dispatch("getAdminInfo").then(ret => {
      next();
    });
  },
  created() {},
  mounted() {
    // this.$store.dispatch("getUserMenus", this.adminInfo.id).then(ret => {
    //   console.log(ret);
    // });
    if (this.adminInfo.userRole === "COM") {
      this.$store.commit("UPDATE_USER_MENUS", this.menus);
    } else {
      this.$store.dispatch("getUserMenus").then(ret => {});
    }
  },
  data() {
    return {
      isCollapse: false,
      menus: this.$appConf.menus
    };
  },
  computed: {
    ...mapGetters({
      adminInfo: "adminInfo",
      userMenus: "userMenus"
    }),
    adminDisplayName() {
      if (this.adminInfo.userRole === "COM") {
        return this.adminInfo.depart.name;
      } else {
        return this.adminInfo.name;
      }
    },
    currentMenus() {
      return this.userMenus;
    }
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      this.$confirm("确认退出吗?", "提示", {})
        .then(() => {
          window.sessionStorage.clear();
          // this.$store.dispatch("cleanInfo");
          // this.$router.replace({name: 'login'})
          window.location.href = "/";
        })
        .catch(() => {});
    },
    goChangePassword() {
      this.$router.push({ name: "changePassword" });
    }
  },
  components: {
    NavMenu,
    ImageCover
  }
};
</script>
<style>
.el-header {
  background-color: #5d91e7;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-menu {
  border: none;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}
</style>
<style lang="less">
.admin-layout {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.nav-logo {
  width: 64px;
  height: 64px;
}

.tools {
  padding: 0 23px 0 0;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
}
.sidebar {
  background-color: #fff;
  position: relative;
  transition: all 0.3s ease;
  border: solid 1px #e6e6e6;
  box-shadow: 1px 0 15px -5px rgba(0, 0, 0, 0.3);
}
.page-main {
  position: absolute;
  top: 60px;
  left: 200px;
  right: 0;
  bottom: 25px;
  transition: all 0.3s ease;
}
.sidebar--show {
  .sidebar {
    transform: translate(0, 0);
  }
  .page-main {
    left: 200px !important;
  }
}
.sidebar--hide {
  .sidebar {
    transform: translate(-200px, 0);
  }
  .page-main {
    left: 0 !important;
  }
}
.collapse-button {
  position: absolute;
  top: calc(50% - 50px);
  left: 0;
  width: 10px;
  height: 100px;
  background: #ccc;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.collapse-button:hover {
  background: #dddddd;
}
.footer {
  background-color: #5d91e7;
  text-align: center;
  padding: 2px;
  height: 25px !important;
}
</style>
